<template>
  <div class="update-log-root">
    <div>
      <div class="update-log" v-for="updateLog in updateLogs" :key="updateLog.title">
        <div class="update-log-title">{{ updateLog.title }}</div>
        <div class="update-log-desc" v-html="updateLog.desc" v-if="updateLog.desc !== ''"></div>
        <div class="update-log-new" v-if="updateLog.news.length > 0">
          <ol>
            <li v-for="newFunc in updateLog.news" :key="newFunc.content" v-html="newFunc.content"></li>
          </ol>
        </div>
        <div class="update-log-fix" v-if="updateLog.fixs.length > 0">
          <ol>
            <li v-for="fixFunc in updateLog.fixs" :key="fixFunc.content" v-html="fixFunc.content"></li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref} from "vue";

const updateLogs = ref([
  {
    title: "V_1.0.0 | 2023-09-09",
    desc: "使用 Vue3，TypeScript，Vite 重构.",
    news: [],
    fixs: []
  },
  {
    title: "V_0.0.1 | 2022-10-01",
    desc: "【Guard Cat 0.0.1】版本，包含了各项基础功能，能初步支撑在线日志监控，流量监控等功能，集群监控，链路监控。该版本主要提供各" +
      "项指标的查询逻辑。未来将添加更多编辑功能，如：<br/>" +
      "1 > 日志级别配置，日志级别定时回滚。<br/>" +
      "2 > 流控规则管理，熔断监控与报警。<br/>" +
      "3 > 链路追踪评率监控，采样率调整。<br/>",
    news: [
      { content: "<b>首页</b><br/><b>1 > </b>天气预报. <br/><b>2 > </b>常用网站链接. <br/><b>3 > </b>常用文档链接. " },
      { content: "<b>集群节点树</b>：以树状形式查看节点在线状态, 分为【在线，离线，警告】" },
      {
        content: "<b>集群节点</b>：以节点形式查看节点信息, 支持 <br/>" +
          "<b>1 > </b>节点主要信息。 <br/>" +
          "<b>2 > </b>节点日志信息. <br/>" +
          "<b>3 > </b>集群流量信息. <br/>" +
          "<b>4 > </b>快捷跳转方式. <br/>" +
          "<b>5 > </b>服务所使用组件和框架. <br/>" +
          "<b>6 > </b>服务警告配置. <br/>" +
          ""
      },
      {
        content: "<b>节点监控</b>：可以查看JVM内存信息. <br/>" +
          "<b>1 > </b>支持各类内存变化监控. <br/>" +
          "<b>2 > </b>GC次数监控. <br/>" +
          "<b>3 > </b>支持下载线程快照, 类快照. 死锁信息" +
          ""
      },
      {
        content: "<b>日志监控</b>：通过ES查看日志. <br/>" +
          "<b>1 > </b>支持48小时日志级别饼图、折线图统计. <br/>" +
          "<b>2 > </b>支持相关性排序、时间排序. <br/>" +
          "<b>3 > </b>支持日志内容包含/排除查询、文件来源查询、日志级别查询、时间范围查询. <br/>" +
          "<b>4 > </b>支持部分匹配和全部匹配. <br/>" +
          "<b>5 > </b>支持结果高亮. <br/>" +
          "<b>6 > </b>支持分词测试、查看原文档. " +
          ""
      },
      {
        content: "<b>流量监控</b>：可以查看集群的流量统计<br/>" +
          "<b>1 > </b>流量列表，按1天内请求总数排行，可查看1天内的平均用时，最大用时.<br/>" +
          "<b>2 > </b>流量变化折线图，可按不同时间范围统计.<br/>" +
          "<b>3 > </b>资源流量排行榜. <br/>" +
          ""
      },
      {
        content: "<b>链路追踪</b>：查看链路信息<br/>" +
          "<b>1 > </b>链路追踪列表<br/>" +
          "<b>2 > </b>链路树状列表，包含链路所属应用，类型，链路耗时<br/>" +
          "<b>3 > </b>链路区间柱状图<br/>" +
          ""
      },
      {
        content: "<b>缓存监控</b>：查看 Redis 缓存信息<br/>" +
          "<b>1 > </b>Redis 配置信息列表<br/>" +
          "<b>2 > </b>Redis 命中率<br/>" +
          "<b>2 > </b>Redis 内存占用<br/>" +
          "<b>2 > </b>Redis 数据库信息<br/>" +
          ""
      },
      { content: "<b>路由信息</b>：查看服务路由信息" },
      { content: "<b>接口文档</b>：查看各服务接口文档，基于 SmartDOC" },
      { content: "<b>中间件监控</b>：查看所使用的中间件的状态" },
    ],
    fixs: [
      { content: "无" },
    ]
  }
],
)


</script>

<style scoped lang="scss">
.update-log-root {
  height: 100%;
  overflow: auto;

  .update-log {
    padding: 0 5px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--el-color-primary-light-5);

    &:last-child {
      border: 0;
    }

    .update-log-title {
      @include font(20px, 700);
      color: var(--el-color-primary);
      border-radius: 10px;
      padding: 5px 10px;
      line-height: 40px;
      margin-top: 10px;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
    }

    .update-log-desc {
      @include font(14px, 500);
      margin: 10px 0 10px 0;
      padding: 0 10px;
      color: var(--el-color-primary);
      text-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
      // @include themeColor($theme-color-light-dark, $theme-color-night);
    }


    .update-log-new,
    .update-log-fix {
      @include themeColor(#7c7c7c, #919191);
      padding: 0 10px;

      &:before {
        @include font(15px, 500);
        // @include themeColor($theme-color-light-dark, $theme-color-night);
      }
    }

    .update-log-new {
      &:before {
        content: '新增内容 🔥';
      }
    }

    .update-log-fix {
      &:before {
        content: '️修改内容 ✏️';
      }
    }

    ol {
      margin-top: 3px;
      @include font(13px);

      li {
        margin-bottom: 5px;
      }
    }

  }
}
</style>